<style>
.explain-tip {
	background-color: #fdf6ec;
	/*width: 1200px;*/
	margin: 20px auto;
	display: flex;
	align-items: stretch;
	padding: 15px 50px;
	justify-content: space-between;
}

.explain-tip .explain-content {
	font-size: 15px;
}

.explain-tip .explain-content li {
	list-style: disc;
	color: #e6a23d;
	line-height: 20px;
}

.explain-tip .close {
	font-size: 20px;
}
</style>
<div id="content-container" class="container" style="width: 90%">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default panel-recharge">
                <div class="panel-body">
                    <div id="app">
						<div :style="{'margin-bottom':appPaddingBottom}">
							<ohcard-header :explain-data="explainData" :room_id="room.id" :title="room.title" :room_code="room.room_code"></ohcard-header>
							<ohcard-step :step="room.step"></ohcard-step>
							<div v-show="explainData.tip" class="explain-tip">
								<ul class="explain-content">
									<li>逐一审视每张牌，看看这张牌是否与你要观察的人有连结，这个连结可能是对方的工作、习惯、个性、生命事件或是共同经历，将感觉有连结的那些牌全部选出来。</li>
									<li>数一下选出的牌，是否有超过10张，如果没有请重新检视一次，确保选出10张以上的图像卡。</li>
									<li>如果图像卡超过10张，依你感觉每张牌的连结强度，舍弃连结最弱的牌，直到剩下10张牌为止。</li>
									<li>最后也是最重要的部分，透过这个牌组，请你向身边的人介绍你观察的对象。</li>
								</ul>
								<div style="display: flex; align-items: center;"><a href="#" class="close" @click="explainData.tip = false">×</a></div>
							</div>
							<component v-if="room" :is="currentTemplate" :room="room" ></component>
						</div>
					</div>
                </div>
            </div>
        </div>
    </div>
</div>